<template>
    <el-dialog title="新建" width="800px" :visible="newConstructionBloon" :before-close="handleClose"
        :close-on-click-modal="false" :destroy-on-close="true" :modal="false">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="类型" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="名称" prop="serviceName">
                <el-input v-model="ruleForm.serviceName"></el-input>
            </el-form-item>
            <el-form-item label="版本" prop="serviceIp">
                <el-input v-model="ruleForm.serviceIp"></el-input>
            </el-form-item>
            <el-form-item label="上传图标" prop="iconUrl">
                <el-upload action="#" :limit="1" :on-change="handleChange" :before-upload="beforeAvatarUpload"
                    accept=".jpeg, .jpg, .gif, .png" :auto-upload="false" :file-list="fileList" :show-file-list="false"
                    list-type="picture-card" ref="uploadicon">
                    <img v-if="ruleForm.iconUrl" :src="ruleForm.iconUrl" class="avatar" />
                    <i class="el-icon-plus" v-if="!ruleForm.iconUrl"></i>
                </el-upload>
            </el-form-item>
        </el-form>

        <!-- 新建 -->
        <div class="dialog-footer">
            <el-button size="medium" @click="handleOk" class="bootonok">
                确定
            </el-button>
            <el-button size="medium" @click="handleClose" class="bootonclose">取 消</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
export default {
    name: "Logdialog",
    components: {

    },
    props: {
        newConstructionBloon: {
            type: Boolean
        },
        dataTypeList: {
            type: Array
        },
        dataObj: {
            type: Object
        },
    },
    emits: ["closeAddtoGroup"],
    data() {
        const validatorIconurl = (rule, value, callback) => {
            // console.log(this.fileList, 'this.fileList');
            if (this.dataObj.iconUrl) {
                var reg = this.dataObj.iconUrl;
                if (reg == "") {
                    callback(new Error("请上传图片"));
                } else {
                    callback();
                }
            } else {
                var reg = this.fileList.length;
                if (reg == 0) {
                    callback(new Error("请上传图片"));
                } else {
                    callback();
                }
            }
        };

        return {
            //点击的内容
            istypeID: null,
            //表单的内容
            ruleForm: {
                iconUrl: "",
                typeId: 1,
                requestUrl: ""
            },
            //表单内容
            ruleFormInfo: {},
            dataProps: {
                label: "value",
                value: "id"
                // children:'value'
            },
            queryParams: {
                projectEnglishName: ""
            },
            //图片上传数据
            iconformData: {},
            // imageUrl: '',
            //上传的数据
            fileList: [],
            //表格数据
            postList: [],
            rules: {
                region: { required: true, message: '请选择类型', trigger: 'change' },
                serviceName: {
                    required: true,
                    message: "请填写名称",
                    trigger: "blur"
                },
               
                serviceIp: { required: true, message: "请填写版本", trigger: "blur" },
                iconUrl: {
                    required: true,
                    validator: validatorIconurl,
                    trigger: "change"
                }
            }
        };
    },
    mounted() {
    },
    methods: {
        handleClose() {
            this.$emit("closeAddtoGroup");
            this.resetForm("ruleForm");
        },
        // 确定
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                }
            });
        },
        //保存
        handleAdd() {
            let ruleFormInfo = this.ruleForm;
            // microserviceAdd(this.ruleForm)
            //     .then(res => {
            //         if (res.success) {
            //             this.$message.success("新增成功");
            //             this.$emit("closeAddtoGroup");
            //             this.$emit("getPageListInfo");
            //             this.resetForm("ruleForm");
            //         }
            //     })
            //     .catch(err => {
            //         // console.log(err);
            //     });
        },
        //编辑
        handleUpdate() {
            debugger;
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    // console.log(this.ruleForm,'888888888888888');
                    microserviceEdit(this.ruleForm)
                        .then(res => {
                            if (res.success) {
                                this.$message.success("更新成功");
                                this.$emit("closeAddtoGroup");
                                this.$emit("getPageListInfo");
                                this.resetForm("ruleForm");
                            }
                        })
                        .catch(err => {
                            // console.log(err);
                        });
                }
            });
        },
        //成功之前
        beforeAvatarUpload(file, fileList) {
            const isJPG = file.raw.type === "image/jpeg";
            const isPNG = file.raw.type === "image/png";
            const isLt2M = file.raw.size / 1024 / 1024 < 0.5;
            this.hideUploadIcon = fileList.length >= 1;
            if (!isPNG && !isJPG) {
                this.$message.error("上传图片只能是 JPG/PNG 格式!");
                return false;
            } else if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 200kb!");
                return false;
            } else if (isLt2M && (isPNG || isJPG)) {
                this.iconformData.img = file.raw; //图片的url
                this.iconformData.name = file.name; //图片的名字
                for (const key in this.iconformData) {
                    formData.append(key, this.iconformData[key]); //传参改为formData格式
                }
            }
        },
        handleChange(item) {
            this.fileList = [];
            const formData = new FormData();
            formData.append("file", item.raw);
            uploadLogo(formData)
                .then(res => {
                    if (res.success) {
                        this.ruleForm.iconUrl = res.data;
                        let objInfo = {
                            imageUrl: res.data
                        };
                        this.fileList.push(objInfo);
                        this.$message.success("上传成功");
                    }
                })
                .catch(() => {
                    this.$message.error("上传失败，请重新上传");
                    this.emptyUpload();
                });
        },
        //点击选择
        openLinksChange() {
            this.openLinksBloon = true;
        },
        //子组件选择的调用父组件方法
        closeopenlinek(val) {
            this.openLinksBloon = false;
            this.ruleForm.requestUrl = val;
        }
    }
};
</script>
  
<style lang="scss" scoped>
@import "~@/assets/styles/CommonStyle.scss";

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.imgInfos {
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 40px;
}

::v-deep .demo-ruleForm {
    height: 510px;
    overflow-y: hidden;
}
</style>
  